<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>仿制阿里巴巴集团官方网站</title>
    <link rel="stylesheet" href="./css/index.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css"/>
    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <!-- 引入Element UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
<div id="app">
    <div class="header">
        <div class="header-inner">
            <nav>
                <li style="list-style-type: none">
                    <img src="./image/logo.png" alt="Alibaba Logo"/>
                </li>
                <ul id="menu" style="margin-left: 30%">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">ESG</a></li>
                    <li><a href="#">投资者关系</a></li>
                    <li><a href="#">新闻及媒体资源</a></li>
                    <li><a href="#">加入我们</a></li>
                </ul>
                <div class="menu-icon" onclick="toggleMenu()">☰</div>
            </nav>
        </div>
        <hr/>
    </div>

    <div class="main">
        <video width="100%" height="800" autoplay muted loop style="object-fit: fill;">
            <source :src="v.url" type="video/mp4" v-for="v in videoArr" :key="v.key">
            <p>您的浏览器不支持HTML5 video标签。</p>
        </video>
        <div class="video-text1">
            {{ swipeTextArr[currentIndex].text1 }}
        </div>
        <div class="video-text2">
            {{ swipeTextArr[currentIndex].text2 }}
        </div>
        <div class="news">
            <div class="news_main">
                <div id="news_title">新闻动态</div>
                <el-row :gutter="24" style="height: 100%">
                    <el-col :span="16">
                        <div class="grid-content bg-purple">
                            <div class="image-container">
                                <img :src="newsArr[0].image"/>
                                <!-- 需要高度占满剩余的col空间 -->
                                <div class="text-inside-card" style="height: 130px">
                                    {{ newsArr[0].title }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" style="height: 100%">
                        <div class="grid-content bg-purple">
                            <div class="image-container">
                                <img :src="newsArr[1].image"/>
                                <!-- 需要高度占满剩余的col空间 -->
                                <div class="text-card" style="height: 270px">
                                    {{ newsArr[1].title }}
                                    <el-divider></el-divider>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 2%; height: 80vh">
                    <el-col :span="8" style="height: 100%">
                        <div class="image-container">
                            <img :src="newsArr[2].image"/>
                            <div class="text-card">
                                {{ newsArr[2].title }}
                                <el-divider></el-divider>

                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" style="height: 100%">
                        <div class="image-container">
                            <img :src="newsArr[3].image"/>
                            <div class="text-card">
                                {{ newsArr[3].title }}
                                <el-divider></el-divider>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" style="height: 100%">
                        <div class="image-container">
                            <img :src="newsArr[4].image"/>
                            <div class="text-card">
                                {{ newsArr[4].title }}
                                <el-divider></el-divider>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="company">
            <div class="company-text">
                <p style="font-weight: 600">
                    阿里巴巴集团的使命是让天下没有难做的生意。
                </p>

                <p style="margin-top: 2%">
                    我们旨在助力企业，帮助其变革营销、销售和经营的方式，提升其效率。我们为商家、品牌、零售商及其他企业提供技术设施以及营销平台，帮助其借助新技术的力量与用户和客户互动，并更高效地经营。我们还为企业提供领先的云设施和服务，以及更强的工作协作能力，促进其数字化转型并支持其业务增长。
                </p>
            </div>
            <img src="./image/word.png" alt="让天下没有难做的生意"/>
        </div>
    </div>
    <div class="footer">
        <div class="footer-box">
            <!-- footer 阿里巴巴logo -->
            <div class="footer-left"><img src="./image/footerlogo.jpg"/></div>
            <div class="footer-right">
                <!-- 联系我们 -->
                <p style="margin-right: 60px; font-size: 20px">关注我们</p>
                <img src="./image/facebook.jpg" alt="facebook"/>
                <img src="./image/linkedin.jpg" alt="linkedin"/>
                <img src="./image/x.jpg" alt="X"/>
                <img src="./image/instagram.jpg" alt="instagram"/>
                <img src="./image/youtube.jpg" alt="youtube"/>
                <img src="./image/sina.jpg" alt="weibo"/>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="footer-list">
            <div class="list-item">
                <div class="item-title">关于我们</div>
                <div class="item-li">文化与价值观</div>
                <div class="item-li">里程碑</div>
                <div class="item-li">领导团队</div>
                <div class="item-li">我们的业务</div>
            </div>
            <div class="list-item">
                <div class="item-title">ESG</div>
                <div class="item-li">最新ESG报告</div>
                <div class="item-li">各类报告</div>
                <div class="item-li">ESG评级与奖项</div>
                <div class="item-li">ESG新闻与观点</div>
            </div>
            <div class="list-item">
                <div class="item-title">投资者关系</div>
                <div class="item-li">投资者新闻</div>
                <div class="item-li">业务和财务报告</div>
                <div class="item-li">证券公告</div>
                <div class="item-li">年度股东大会</div>
                <div class="item-li">公司治理</div>
                <div class="item-li">投资者工具</div>
            </div>
            <div class="list-item">
                <div class="item-title">新闻及媒体资源</div>
                <div class="item-li">新闻发布</div>
                <div class="item-li">媒体资料库</div>
                <div class="item-li">媒体联系</div>
            </div>
            <div class="list-item">
                <div class="item-title">加入我们</div>
                <div class="item-li">招聘官网</div>
            </div>
            <div class="list-item">
                <div class="item-title">联系我们</div>
                <div class="item-li">常见问题</div>
            </div>
        </div>
        <div class="friendship-link">
            <div class="friendship-link-item">
                <p>淘宝</p>
                <el-divider direction="vertical"></el-divider>
                <p>天猫</p>
                <el-divider direction="vertical"></el-divider>
                <p>闲鱼</p>
                <el-divider direction="vertical"></el-divider>
                <p>天猫超市</p>
                <el-divider direction="vertical"></el-divider>
                <p>天猫国际</p>
                <el-divider direction="vertical"></el-divider>
                <p>阿里健康</p>
                <el-divider direction="vertical"></el-divider>
                <p>盒马</p>
                <el-divider direction="vertical"></el-divider>
                <p>高鑫零售</p>
                <el-divider direction="vertical"></el-divider>
                <p>银泰百货</p>
                <el-divider direction="vertical"></el-divider>
                <p>1688</p>
                <el-divider direction="vertical"></el-divider>
                <p>速卖通</p>
                <el-divider direction="vertical"></el-divider>
                <p>Lazada</p>
                <el-divider direction="vertical"></el-divider>
                <p>Trendyol</p>
                <el-divider direction="vertical"></el-divider>
                <p>Daraz</p>
                <el-divider direction="vertical"></el-divider>
                <p>阿里巴巴国际站</p>
                <el-divider direction="vertical"></el-divider>
                <p>饿了么</p>
                <el-divider direction="vertical"></el-divider>
                <p>高德</p>
                <el-divider direction="vertical"></el-divider>
                <p>飞猪</p>
                <el-divider direction="vertical"></el-divider>
                <p>优酷</p>
                <el-divider direction="vertical"></el-divider>
                <p>阿里影业</p>
                <el-divider direction="vertical"></el-divider>
                <p>灵犀互娱</p>
                <el-divider direction="vertical"></el-divider>
                <p>大麦</p>
                <el-divider direction="vertical"></el-divider>
                <p>夸克</p>
                <el-divider direction="vertical"></el-divider>
                <p>UC</p>
            </div>
            <div class="friendship-link-item-2">
                <p>阿里巴巴达摩院</p>
                <el-divider direction="vertical"></el-divider>
                <p>天猫精灵</p>
                <el-divider direction="vertical"></el-divider>
                <p>菜鸟</p>
                <el-divider direction="vertical"></el-divider>
                <p>阿里云</p>
                <el-divider direction="vertical"></el-divider>
                <p>钉钉</p>
                <el-divider direction="vertical"></el-divider>
                <p>阿里巴巴公益基金会</p>
                <el-divider direction="vertical"></el-divider>
                <p>阿里巴巴创业者基金</p>
                <el-divider direction="vertical"></el-divider>
                <p>阿里巴巴普惠体</p>
                <el-divider direction="vertical"></el-divider>
                <p>阿里巴巴奥运之旅</p>
            </div>
        </div>
        <div class="foot">
            <div class="foot-item">
                法律声明&nbsp;&nbsp;&nbsp;隐私政策&nbsp;&nbsp;&nbsp;版权公告 &copy; 1999-2023
                阿里巴巴集团控股有限公司及／或其关联公司及特许人。版权所有。
                <br>
                此页面为学术交流仿写页面 如有侵权请联系网站负责人：聂森&nbsp;&nbsp;markc1d.top域名已在工信部备案通过
                <br>
            </div>
            <div class="foot-item-1">
                滇ICP备2023014147号-1
            </div>
        </div>
    </div>
</body>
<script>
    let v = new Vue({
        el: "#app",
        data() {
            return {
                videoArr: [],
                newsArr: [],
                swipeTextArr: [],
                currentIndex: 0,
            }
        },
        created() {
            this.loadVideo();
            this.loadNews();
            this.loadSwipeText();
            this.startSwipe();
        },
        methods: {
            //加载banner视频数据
            loadVideo() {
                axios.get("video/list").then((response) => {
                    this.videoArr = response.data;
                });
            },

            //加载新闻数据
            loadNews() {
                axios.get("news/list").then((response) => {
                    this.newsArr = response.data;
                });
            },
            //加载轮播文字数据
            loadSwipeText() {
                axios.get("swipetext/list").then((response) => {
                    this.swipeTextArr = response.data;
                });
            },
            // 开始轮播
            startSwipe() {
                setInterval(() => {
                    this.currentIndex = (this.currentIndex + 1) % this.swipeTextArr.length;
                }, 6500); // 每3秒切换一次
            }
        }
    });
</script>
</html>